<template>
  <div>
    <el-progress :percentage="p" v-bind="$attrs" isAnimation  />
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
let props = defineProps({
  // 进度条进度
  percentage: {
    type: Number,
    default: 0,
  },
  // 进度条是否有动画效果
  isAnimation: {
    default: true,
    type: Boolean,
  },
  // 动画时间(毫秒)
  time: {
    default: 3000,
    type: Number,
  },
});
// 进度
let p = ref(0);
onMounted(() => {
  //如果开启了动画
  if (props.isAnimation) {
    // 百分之一执行多少毫秒
    let t = Math.ceil(props.time / props.percentage);
    let timer = setInterval(() => {
      p.value += 1;
      if (p.value >= props.percentage) {
        p.value = props.percentage;
        clearInterval(timer);
      }
    }, t);
  } else {
    p.value = props.percentage;
  }
});
</script>
<style lang="scss" scoped></style>
